import { Radio } from "antd";
import { useSearchParams } from "react-router";
import Operation from "./Operation";
import Warning from "./Warning";
import Maintain from "./Maintain";

type Tab = "operation" | "warning" | "maintain";
const tabs = [
  { label: "操作", value: "operation" },
  { label: "报警", value: "warning" },
  { label: "维护", value: "maintain" },
];

export default function Log() {
  const [search, setSearch] = useSearchParams();

  const current = search.get("tab") || "operation";

  return (
    <div className="h-full">
      <div className="flex justify-center py-6">
        <Radio.Group
          options={tabs}
          defaultValue={current}
          optionType="button"
          buttonStyle="solid"
          onChange={(e) =>
            setSearch((p) => {
              p.set("tab", e.target.value as Tab);
              return p;
            })
          }
        />
      </div>
      <Operation visible={current === "operation"} />
      <Warning visible={current === "warning"} />
      <Maintain visible={current === "maintain"} />
    </div>
  );
}
